<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="cu-bar search flex justify-between" style="background-color: #f0f0f0;">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goback"></text>
			</view>
			<view class="content">
				个人头像
			</view>
			<view class="action">
				<text class="cuIcon-more" @tap="showModal" data-target="bottomModal"></text>
			</view>
		</view>
		<view>
			<image :src="userInfo.faceImage" mode="aspectFit" style="width: 750upx;margin-top: 100upx;" @tap="chooseAvatar"></image>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green">确定</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					<view class="modalAction padding solids cuIcon-upload" @tap="changeAvatar()">更换头像</view>
					<view class="modalAction padding solids" @tap="saveAvatar()">保存头像</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad() {
			this.userInfo = this.$tool.getStorageSync("userInfo")
		},
		data() {
			return {
				userInfo: {},
				modalName: null
			}
		},
		methods: {
			goback() {
				uni.navigateBack(-1)
			},
			// 展示底部弹出的模态框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 隐藏底部弹出的模态框
			hideModal(e) {
				this.modalName = null
			},
			// 单击头像
			chooseAvatar() {
				var that = this
				// 预览图片
				uni.previewImage({
					urls: [this.userInfo.faceImage],
					longPressActions: {
						itemList: ['更换图片', '保存图片'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							console.log(data.tapIndex, data.index);
							switch (data.tapIndex) {
								case 0:
									that.changeAvatar();
									break;
								case 1:
									that.saveAvatar();
									break;
								default:
									console.log('default')
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 更换头像
			changeAvatar() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			// 保存头像
			saveAvatar() {
				uni.saveImageToPhotosAlbum({
					filePath: this.userInfo.faceImage,
					success: function() {
						console.log('save success');
					}
				});
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.modalAction {
		width: 100%;
		height: 100upx;
		background-color: bg-white;
		color: #22d848;
		margin-bottom: 10upx;
	}
</style>
